[Apple Watch アプリ開発] #5 ボタン

WKInterfaceButton

概要

WKInterfaceButtonオブジェクトは、画面上でタップ可能な領域（ボタン）を表します。 ボタンに表示するテキストや色・画像を設定することができます。

特性

ボタンは以下の特性を持ちます。

• カスタマイズ可能な背景を持つ
• 他の要素を区別するための丸角を持つ
• ラベルやグループオブジェクトを含めることができる

また、Apple はボタンを使用するときは以下のことを推奨しています。

• 横幅はスクリーンいっぱいになるように作成してください ボタンを横に並べなければいけない場合でも、並べられるボタンは最大 2 つです
• 可能な限りボタンの高さは統一してください
• デフォルトのcorner radiusを使用してください 標準のボタンのcorner radiusは6 ポイントです

作ってみる

実行画面

フォントスタイル

OS で用意されているWKInterfaceButtonのフォントスタイルは以下の9 種類です。 デフォルトのフォントスタイルはRegularです。

それぞれの見た目はこのようになっています。

ボタンタップ時のアクションを設定する

タップされた時のメソッドの登録はStoryboard 上からしかできないようです。 WatchKit では、UIControlのaddTargetに相当するメソッドは用意されていません。

WKInterfaceButton の定義

WKInterfaceButton は以下のように定義されています。

@availability(iOS, introduced=8.2)
class WKInterfaceButton : WKInterfaceObject {

func setTitle(title: String?)
func setAttributedTitle(attributedTitle: NSAttributedString?)

func setBackgroundColor(color: UIColor?)
func setBackgroundImage(image: UIImage?)
func setBackgroundImageData(imageData: NSData?)
func setBackgroundImageNamed(imageName: String?)

func setEnabled(enabled: Bool)
}

ボタンのタイトルと背景色/画像を設定できます。 また Enabled の切り替えもできるようです。

それでは実際に背景画像を設定してみましょう。

背景画像の設定

設定する画像はこちら。 ファイル名はmosaic@2x.pngとしています。

サンプルコード

@IBOutlet weak var button: WKInterfaceButton!

override func awakeWithContext(context: AnyObject?) {
super.awakeWithContext(context)

self.button.setBackgroundImageNamed("mosaic")
}

実行画面

背景画像によってボタンの高さが動的に変わるのでしょうか。 横幅は画面にフィットするようでした。 ここらへんの挙動はよくわかりませんでした。 ごめんなさい。

まとめ

WKInterfaceButtonはボタンを作成するために利用します。 ボタンタップ時のアクションは Storyboard から設定しましょう。

リンク

• WKInterfaceButton Class Reference
• Buttons